<script setup>
import '../../assets/css/microdone-h5.css'
import Utility from 'UTIL/utility'
import { onMounted, watchEffect, onBeforeUnmount } from 'vue'
// import { PasswordInput } from 'vant'
import { __DEV__ } from '@/utils/utility.js'
import $ from 'jquery'
let xh = 0
const props = defineProps({
  needShow: {
    type: Boolean,
    default: false,
  },
  clear: {
    type: Boolean,
  },
  onChange: {
    type: Function,
    default: () => {},
  },
  onFinish: {
    type: Function,
    default: () => {},
  },
  onFocus: {
    type: Function,
    default: () => {},
  },
  passGuard: {
    type: String,
    default: '',
  },
  pwdId: {
    type: String,
    default: '',
  },
  type: {
    type: String,
    default: '',
  },
  len: {
    type: String,
    default: '',
  },
})
// const pwdValue = ref('')
// const showKeyboard = ref(true)
const sixPwdSetting = () => {
  if (!window.PassGlobalSix) {
    window.PassGlobalSix = {}
    //add 在声明keyBoard对象前，先判断一下该变量是否存在  Kb全局唯一
    if (typeof window.kb == 'undefined') {
      window.kb = new keyBoard({
        chaosMode: 0, // 混乱模式,0:无混乱;1:打开时乱一次;2:每输入一个字符乱一次,默认值0
        pressStatus: 1, // 按键状态,0:按下、抬起按键无变化;1:按下、抬起按键的颜色变化,默认值0
        odd: 51, // 按键异或值
        svg: __DEV__ ? '/src/assets/svg' : '/assets/svg', // svg图片的地址
      })
    }
    if (props.type === 'mixture') {
      regExp2 = '[\\S\\s]{6,23}'
    }
  }
  window.PassGlobalSix[props.passGuard] = new passGuard({
    mappurl: Utility.getGMMappUrl(),
    fixed: 'Kjtfixed',
    jump: 1, // 是否用添加删除回调：1代表使用，0代表不使用
    add: tianjia, // 输入框值添加回调,当jump为1时，才有回调
    del: jianshao, // 输入框值减少回调,当jump为1时，才有回调
    maxLength: 10, // 最大输入长度
    regExp1: '[0-9]', // 输入过程限制的正则
    regExp2: '[0-9]{6}',
    callBack: inputSuccess, // 成功回调
    errorCallBack: inputFail, // 失败回调
  })
}
watchEffect(() => {
  if (props.clear) {
    if (window.PassGlobalSix && window.PassGlobalSix[props.passGuard]) {
      $(`#${props.pwdId}ul`).find('li').html('')
      // console.log('关闭', props.pwdId)
      // pwdValue.value = ''
      window.PassGlobalSix[props.passGuard].clearpwd()
    }
  }
})
onMounted(() => {
  $(`#${props.pwdId}`).val('')
  $(`#${props.pwdId}ul`).find('li').html('')
  // window.PassGlobal.kb.generate(0);//生成键盘（参数为1时，为海融易；为0时，为快捷支付）
  // 输入密码格子样式
  const liHeight = document.documentElement.clientWidth * 0.81 * 0.166
  $(`#${props.pwdId}ul`)
    .find('li')
    .css({
      height: `${liHeight}px`,
      lineHeight: `${liHeight}px`,
    })

  $(`#${props.pwdId}`).css({
    height: `${liHeight}px`,
  })
  $(`#${props.pwdId}`).val('')
  sixPwdSetting()
  refresh()
  diySoftboard()
  if (props.autoFocus) {
    setTimeout(() => {
      document.getElementById(props.pwdId).click() // 调用键盘
    }, 400)
  }
})
const inputSuccess = () => {
  // console.log(e,33333)
  // if (props.onFinish && typeof props.onFinish === 'function') {
  //   props.onFinish()
  // }
}

const inputFail = () => {
  if (props.onFailed && typeof props.onFailed === 'function') {
    props.onFailed()
  }
}
const getInputCount = () =>
  $(`#${props.pwdId}ul`).find('li').find('span').length
const tianjia = () => {
  // xh为密码的长度
  xh = getInputCount()
  if (xh < 6) {
    xh = xh + 1
  } else {
    return
  }

  $(`#${props.pwdId}ul`)
    .find('li')
    .eq(xh - 1)
    .append($('<span class="yuan">●</span>'))
  if (xh === 6) {
    if (!props.needShow) {
      window.kb.hide()
    }
    props.onFinish()
  }

  onChange()
}
onBeforeUnmount(() => {
  $(`#${props.pwdId}ul`).find('li').html('')
})
const jianshao = () => {
  xh = getInputCount()
  if (xh > 0) {
    xh = xh - 1
  } else {
    return
  }
  $(`#${props.pwdId}ul`).find('li').eq(xh).html('')
  onChange()
}
const onChange = () => {
  props.onChange(xh)
}

// 数字键需要切换字母的按键
const diySoftboard = () => {
  if (props.type == 'six') {
    $('#kb_p_C').hide()
    $('#kb_p_CLOSE').css('width', '33.25%')
  } else {
    $('#kb_p_C').show()
    $('#kb_p_CLOSE').css('width', '16.67%')
  }
}

const refresh = () => {
  if (!window.PassGlobalSix[props.passGuard]) {
    window.location.reload()
  }
  window.kb.generate(0) // 生成键盘（参数为1时，为海融易；为0时，为快捷支付）
  window.PassGlobalSix[props.passGuard].generate(
    props.pwdId,
    window.kb,
    `window.PassGlobalSix['${props.passGuard}']`,
    props.type === 'six' ? 1 : 0,
    window.PassGlobalSix[props.passGuard]
  )
}
</script>
<template>
  <div className="sixPwd">
    <input
      type="text"
      :id="props.pwdId"
      name="input3"
      className="default NoneInput90 sixPwdControl"
      maxLength="50"
      tabIndex="0"
    />

    <ul className="kb3" :id="`${props.pwdId}ul`">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <!-- <PasswordInput
      class="pwd-input"
      :value="pwdValue"
      :focused="showKeyboard"
      @focus="showKeyboard = true"
    /> -->
  </div>
</template>
<style scoped lang="scss">
@import '@/assets/less/pwd.scss';
.kb3 {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.kb3 li {
  width: 16.6%;
  list-style: none;
  height: 28px;
  line-height: 25px;
  font-family: 'PingFang';
  text-align: center;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  font-size: 20px;
  color: #646464;
  float: left;
  border-left: 0;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pwd-input {
  padding: 0 0.18rem;
}
.sixPwd {
  position: relative;
}
.sixPwdControl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  z-index: 999;
}
</style>
